<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>资源列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>资源管理</h5>
                </div>
                <div class="ibox-content">
                    <p>
                    <@shiro.hasPermission name="system:resource:add">
                        <button class="btn btn-success " type="button" onclick="add();"><i class="fa fa-plus"></i>&nbsp;添加</button>
                    </@shiro.hasPermission>
                    </p>
                    <hr>
                    <div class="row row-lg">
                        <div class="col-sm-12">
                            <!-- Example Card View -->
                            <div class="example-wrap">
                                <div class="example">
                                    <table id="table_list"></table>
                                </div>
                            </div>
                            <!-- End Example Card View -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>


<!-- Bootstrap table -->
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

<!-- layui -->
<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>

<!-- Page-Level Scripts -->
<script type="text/javascript">
    //文档初始化
    $(document).ready(function () {
        $('#table_list').bootstrapTable({ //初始化表格，动态从服务器加载数据
            method: 'post', //使用post请求到服务器获取数据
            contentType: 'application/x-www-form-urlencoded', //必须设置，不然request.getParameter获取不到请求参数
            url: '${ctx!}/admin/resource/list', //获取数据的Servlet地址
            striped: true, //表格显示条纹
            pagination: true, //启用分页
            pageSize: 10, //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [5, 10, 15, 20, 25], //记录数可选列表
            search: true, //是否启用查询
            detailView:true, //是否启用详细信息视图
            detailFormatter:detailFormatter, //详细信息格式化
            sidePagination: 'server', //表示服务端请求
            //queryParamsType设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //queryParamsType设置为limit可以获取limit，offset，search，sort，order
            queryParamsType: "undefined",
            responseHandler: function(data) { //解析服务器响应的JSON数据
                return {
                    'rows': data.content, //当前页数据
                    'total': data.totalElements //总记录数
                };
            },
            //数据列
            columns: [
                {
                    title: 'ID',
                    field: 'id',
                    sortable: true
                },
                {
                    title: '资源名称',
                    field: 'name'
                },
                {
                    title: '资源KEY',
                    field: 'sourceKey'
                },
                {
                    title: '资源类型',
                    field: 'type',
                    formatter: function(value, row, index) {
                        if (value === 0) {
                            return '<span class="label label-info">目录</span>';
                        } else if(value === 1) {
                            return '<span class="label label-primary">菜单</span>';
                        } else if(value === 2) {
                            return '<span class="label label-warning">按钮</span>';
                        }
                    }
                },
                {
                    title: '资源URL',
                    field: 'sourceUrl'
                },
                {
                    title: '层级',
                    field: 'level',
                    sortable: true
                },
                {
                    title: '排序',
                    field: 'sort',
                    sortable: true
                },
                {
                    title: '图标',
                    field: 'icon'
                },
                {
                    title: '状态',
                    sortable: true,
                    field: 'isHide',
                    formatter: function (value, row, index) {
                        if (value === 0) {
                            return '<span class="label label-info">显示</span>';
                        } else if(value === 1) {
                            return '<span class="label label-danger">隐藏</span>';
                        }
                    }
                },
                {
                    title: '创建时间',
                    field: 'createTime',
                    sortable: true
                },
                {
                    title: '更新时间',
                    field: 'updateTime',
                    sortable: true
                },
                {
                    title: '操作',
                    field: 'empty',
                    formatter: function (value, row, index) {
                        var operateHtml = '<@shiro.hasPermission name="system:resource:add"><button class="btn btn-primary btn-xs" type="button" onclick="edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>&nbsp;修改</button> &nbsp;</@shiro.hasPermission>';
                        operateHtml = operateHtml + '<@shiro.hasPermission name="system:resource:deleteBatch"><button class="btn btn-danger btn-xs" type="button" onclick="del(\'' + row.id + '\')"><i class="fa fa-remove"></i>&nbsp;删除</button></@shiro.hasPermission>';
                        return operateHtml;
                    }
                }
            ]
        });
    });

    //修改
    function edit(id) {
        layer.open({
            type: 2,
            title: '资源修改',
            shadeClose: true,
            shade: false,
            area: ['893px', '600px'],
            content: '${ctx!}/admin/resource/edit/' + id,
            end: function() {
                $('#table_list').bootstrapTable('refresh');
            }
        });
    }

    //新增
    function add() {
        layer.open({
            type: 2,
            title: '资源添加',
            shadeClose: true,
            shade: false,
            area: ['893px', '600px'],
            content: '${ctx!}/admin/resource/add',
            end: function() {
                $('#table_list').bootstrapTable('refresh');
            }
        });
    }

    //删除
    function del(id) {
        layer.confirm('您确定删除吗?', {icon: 3, title: '提示'}, function(index) {
            $.ajax({
                type: 'get',
                dataType: 'json',
                url: '${ctx!}/admin/resource/delete/' + id,
                success: function(data) {
                    layer.msg(data.message, {time: 2000}, function() {
                        $('#table_list').bootstrapTable('refresh');
                        layer.close(index);
                    });
                }
            });
        });
    }

    //详细信息格式化
    function detailFormatter(index, row) {
        var html = [];
        html.push('<p><b>描述:</b>' + row.description + '</p>');
        return html.join('');
    }

</script>

</body>

</html>
